$(function () {
    var username = $.cookie("username");

    var empty = $("#empty");
    var cartContent = $(".content");
    var orderContent = $(".order-content");

    if ($.cookie('username') != null) {
        getMyCart()
    } else {
        location.href = "./login.html"
    }

    var hasuser = $(".hasuser");
    var logout = hasuser.children().eq(1);
    logout.click(function () {
        if ($.cookie('username') != null) {
            getMyCart()
        } else {
            location.href = "./login.html"
        }
    })

    function beEmpty() {
        var cartLists = $('.item-holder');
        if (cartLists.length == 0) {
            empty.show();
            cartContent.hide();
        }
        else {
            empty.hide();
            cartContent.show();
        }
    }

    function getMyCart() {
        axios({
            url: `http://localhost:6766/api/cart/${username}`,
            method: "get"
        }).then(function (res) {
            if (res.data.error_code == 1) {
                empty.show();
                cartContent.hide();
            }
            else if (res.data.error_code == 0) {
                empty.hide();
                cartContent.show();
                var newData = res.data.datas;
                $(newData).each(function (index, item) {
                    var order = index;
                    var num = item.num;
                    var goodid = item.goodid;
                    axios({
                        url: `http://localhost:6766/api/good/${goodid}`,
                        method: "get"
                    }).then(function (res1) {
                        // console.log(order);
                        orderContent.append(`
                        <div class="item-holder" data-id="${res1.data.datas.id}">
                            <ul class="item-content">
                                <li class="td td-chk">
                                    <div class="td-inner">
                                        <div class="cart-checkbox">
                                            <input class="check-box" id="checkbox-${order}" type="checkbox" name="goods"
                                                value="${order}">
                                            <label for="checkbox-${order}">勾选商品</label>
                                        </div>
                                    </div>
                                </li>
                                <li class="td td-item">
                                    <div class="td-inner">
                                        <div class="item-pic img-loaded">
                                            <a href="" data-title="${res1.data.datas.name}">
                                                <img src="${res1.data.datas.img}" class="itempic">
                                            </a>
                                        </div>
                                        <div class="item-info">
                                            <div class="item-basic-info">
                                                <a href="" title="${res1.data.datas.name}"
                                                    class="item-title">${res1.data.datas.name}</a>
                                            </div>
                                            <div class="item-other-info">
                                                <div class="promo-logos"></div>
                                                <div class="item-icon-list">
                                                    <div class="item-icons">
                                                        <span class="item-icon item-icon-0" title="支持信用卡支付">
                                                            <img src="//assets.alicdn.com/sys/common/icon/trade/xcard.png"
                                                                alt="">
                                                        </span>
                                                        <a href="" class="item-icon item-icon-1 J_MakePoint"
                                                            title="消费者保障服务，卖家承诺7天退换">
                                                            <img src="//img.alicdn.com/tps/i3/T1Vyl6FCBlXXaSQP_X-16-16.png"
                                                                alt="">
                                                        </a>
                                                        <a href="" class="item-icon item-icon-2 J_MakePoint"
                                                            title="消费者保障服务，卖家承诺如实描述">
                                                            <img src="//img.alicdn.com/tps/i4/T1BCidFrNlXXaSQP_X-16-16.png"
                                                                alt="">
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="item-tips"></div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="td td-price">
                                    <div class="td-inner">
                                        <div class="item-price">
                                            <em class="price-now">￥${res1.data.datas.price}.00</em>
                                        </div>
                                    </div>
                                </li>
                                <li class="td td-amount">
                                    <div class="td-inner">
                                        <div class="amount-wrapper ">
                                            <div class="item-amount ">
                                                <a href="javascript:void(0)" data-id="${res1.data.datas.id}" class="reduce">-</a>
                                                <input type="text" value="${num}" class="text-amount"
                                                    autocomplete="off">
                                                <a href="javascript:void(0)" data-id="${res1.data.datas.id}" class="plus">+</a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="td td-sum">
                                    <div class="td-inner">
                                        <em class="number">￥${num * res1.data.datas.price}.00</em>
                                    </div>
                                </li>
                                <li class="td td-op">
                                    <div class="td-inner">
                                        <a href="javascript:;" class="del" data-id="${res1.data.datas.id}" id="${order}">删除</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        `)
                    })
                })
            }
        })
    }

    // 选中效果
    $(document).on("click", ".check-box", function () {
        $(this).toggleClass("selected");
        if ($(this).hasClass("selected")) {
            $(this).parent().parent().parent().parent().parent().addClass("selected");
        }
        else {
            $(this).parent().parent().parent().parent().parent().removeClass("selected");

        }
    })

    // 轻提示
    var Toast = $(".mhy-toast");
    Toast.hide();

    // 删除商品
    $(document).on("click", ".del", function () {
        var that = this;

        axios({
            url: `http://localhost:6766/api/cart/${that.dataset.id}/${username}`,
            method: "delete"
        }).then(function (res) {
            if (res.data.error_code == 0) {
                $(that).parent().parent().parent().parent().remove();
                Toast.show();
                var mytime = setTimeout(function () {
                    Toast.hide();
                    clearTimeout(mytime);
                }, 1000);
                beEmpty();
            }
        })
    })

    // 减少商品数量
    $(document).on("click", ".reduce", function () {
        var pastNum = $(this).next().val();
        if (pastNum - 1 > 0) {
            $(this).next().val(pastNum - 1);
            var nowNum = $(this).next().val();
            var that = this;

            $(this).attr("disabled", true); axios({
                url: `http://localhost:6766/api/cart`,
                method: "put",
                data: {
                    "username": username,
                    "goodid": that.dataset.id,
                    "num": nowNum
                }
            }).then(function (res) {
            })
        }
    })

    // 增加商品数量
    $(document).on("click", ".plus", function () {
        var pastNum = $(this).prev().val() * 1;
        $(this).prev().val(pastNum + 1);
        var nowNum = $(this).prev().val();
        var that = this;

        axios({
            url: `http://localhost:6766/api/cart`,
            method: "put",
            data: {
                "username": username,
                "goodid": that.dataset.id,
                "num": nowNum
            }
        }).then(function (res) {
        })
    })

    // 选中删除
    $(document).on("click", ".deleteSelected", function () {
        var cartLists = $(".item-holder");
        cartLists.each(function (index, item) {
            if ($(item).hasClass("selected")) {
                axios({
                    url: `http://localhost:6766/api/cart/${item.dataset.id}/${username}`,
                    method: "delete"
                }).then(function (res) {
                    if (res.data.error_code == 0) {
                        $(item).remove();
                        Toast.show();
                        var mytime = setTimeout(function () {
                            Toast.hide();
                            clearTimeout(mytime);
                        }, 1000);
                        beEmpty();
                    }
                });
            }
        })
    })

})